<script setup>
import { ref } from 'vue';
import { useUserInfoStore } from '../../stores/userInfo'
let isView = ref(false)
let userInfoStore = useUserInfoStore()
let data = ref({
    seat_id: '',
    reservation_date: '',
    reservation_time: ''
})
function close() {
    isView.value = false;
}

async function EndReservation() {
    console.log(data.value);
    //不为空
    if (data.value.seat_id && data.value.reservation_date && data.value.reservation_time) {
        //发送请求
        let res = await userInfoStore.sendReservation(data.value)
        ElMessage.success('预约成功，请等待申请通过')
        setTimeout(() => {
            location.reload()
        }, 1000)
    } else {
        //提示用户
        ElMessage.error('请填写完整信息')

    }
}


</script>
<template>
    <div class="no-reservation-content">
        <h2>你还没有预约哦</h2>
        <button @click="isView = true">开始预约</button>
    </div>

    <form-data :isView="isView" @close="close()">
        <template #title>预约</template>
        <template #form>
            <div class="input">
                <label for="seatID">座位号:</label>
                <select name="" id="seatID" v-model="data.seat_id">
                    <option value="1">座位号1</option>
                    <option value="2">座位号2</option>
                    <option value="3">座位号3</option>
                    <option value="4">座位号4</option>
                    <option value="5">座位号5</option>
                    <option value="6">座位号6</option>
                    <option value="7">座位号7</option>
                    <option value="8">座位号8</option>
                    <option value="9">座位号9</option>
                    <option value="10">座位号10</option>
                    <option value="11">座位号11</option>
                    <option value="12">座位号12</option>
                    <option value="13">座位号13</option>
                    <option value="14">座位号14</option>
                    <option value="15">座位号15</option>
                    <option value="16">座位号16</option>
                    <option value="17">座位号17</option>
                    <option value="18">座位号18</option>
                    <option value="19">座位号19</option>
                    <option value="20">座位号20</option>
                    <option value="21">座位号21</option>
                    <option value="22">座位号22</option>
                    <option value="23">座位号23</option>
                </select>
            </div>
            <div class="input"><label for="reserveTime">预约时间:</label>
                <input type="datetime-local" v-model="data.reservation_date" id="reserveTime" name="reserveTime">
            </div>

            <div class="input">
                <label for="reserveDuration">预约时长:</label>
                <select name="" id="reserveDuration" v-model="data.reservation_time" class="input">
                    <option value="1">1小时</option>
                    <option value="2">2小时</option>
                    <option value="3">3小时</option>
                    <option value="4">4小时</option>
                    <option value="5">5小时</option>
                    <option value="24">一天</option>
                    <option value="168">一周</option>
                    <option value="9999">实验室的同学占用</option>
                </select>
            </div>
        </template>

        <template #button>
            <button type="button" @click="EndReservation()">预约</button>
        </template>
    </form-data>
</template>

    

<style scoped>
.no-reservation-content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

h2 {
    font-size: 20px;
    color: #999;
    margin-bottom: 40px;
}
</style>
